<template>
  <div id="answer" v-loading="loading" element-loading-text="努力批改试卷中...">
    <div id="top-bar">
      <div class="group">
        <div id="timer">
          <el-icon name="timer"></el-icon>
          <p>{{formatTime(second).minute}}:{{formatTime(second).second}}</p>
        </div>
        <div id="answer-process">
          <el-progress :show-text="false" :percentage="percentage" :color="progressColor"/>
          <p>{{answerCount}}/{{topic.length}}</p>
        </div>
      </div>
      <el-button :loading="loading" @click="verifyAnswer" type="danger">提交试卷</el-button>
    </div>
    <!--    topic-->
    <el-divider></el-divider>
    <topic :topic-num="curTopicIndex" :topic="topic[curTopicIndex]"/>
    <!--    topic-card-->
    <el-collapse-transition>
      <div id="answer-card" v-show="showAnCard">
        <div style="height: 100%">
          <div class="container">
            <div class="que-num-card" :class="[topic[i].uAnswer.length?'is-answer':'no-answer']"
                 v-for="(item,i) in topic">
              <input name="que-num-card" v-model="curTopicIndex" :value="i" :id="'qnc'+i" type="radio"/>
              <label :for="'qnc'+i">{{i+1}}</label>
            </div>
          </div>
        </div>
      </div>
    </el-collapse-transition>
    <!--    bar-->
    <div id="switch-topic" @click="switchTopic">
      <button data-op="pre">上一题</button>
      <el-tooltip class="item" effect="dark" :content="(!showAnCard?'显示':'隐藏')+'答题卡'" placement="top">
        <button :class="{'show-an-card':showAnCard}" data-op="an-card">
          <el-icon name="date"/>
        </button>
      </el-tooltip>
      <button data-op="next">下一题</button>
    </div>
  </div>
</template>

<script>
  import {mapActions, mapState, mapMutations} from "vuex";
  import {formatTime} from "@/util/function"
  import Topic from "@/view/answer/topic"

  export default {
    name: "answer",
    components: {Topic},
    props: ['queBankId'],
    data() {
      return {
        curTopicIndex: parseInt(sessionStorage.getItem('curTopicIndex')) || 0,
        showAnCard: false,
        second: 0,
        timer: null,
        loading: false
      }
    },
    mounted() {
      this.second = this.answerTime
      this.timer = this.$route.name === 'answer' && setInterval(() => {
        this.SET_ANSWER_TIME(++this.second)
      }, 1000)
    },
    watch: {
      curTopicIndex(n) {
        sessionStorage.setItem('curTopicIndex', n)
      }
    },
    computed: {
      ...mapState({
        topic: state => state.topic,
        answerTime: state => state.answerTime
      }),
      progressColor() {
        if (this.percentage < 30) return '#909399';
        else if (this.percentage < 70) return '#e6a23c';
        else return '#67c23a';
      },
      percentage() {
        return (this.answerCount / this.topic.length) * 100
      },
      answerCount() {
        return this.topic.filter(item => item.uAnswer.length).length;
      }
    },
    methods: {
      ...mapActions(['getTopic', 'markAnswer']),
      ...mapMutations(['SET_ANSWER_TIME']),
      formatTime,
      async verifyAnswer() {
        const targetRoute = {name: 'grade', params: {queBankId: this.queBankId}}
        let confirm = null;
        if (this.answerCount !== this.topic.length) {
          confirm = await this.$confirm('你有部分题目尚未完成是否提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(() => {
            confirm = false
            this.showAnCard = true
          })
        }

        (confirm || confirm === null)
        && (this.loading = true)
        && this.markAnswer(this.queBankId).then((res) => {
          clearInterval(this.timer)
          this.$router.push(targetRoute);
        }).catch(console.log).finally(() => this.loading = false)
      },
      switchTopic(e) {
        const handle = e === 'jump' ? e : e.target.dataset.op;
        switch (handle) {
          case 'pre':
            this.curTopicIndex && this.curTopicIndex-1;
            break
          case 'next':
            this.curTopicIndex !== this.topic.length - 1 && this.curTopicIndex++
            break
          case 'an-card':
            this.showAnCard = !this.showAnCard;
            break
        }
      },
    },
    destroyed() {
      clearInterval(this.timer)
    }
  }
</script>

<style scoped src="../../assets/css/answer.css"/>
